<template>
  <a-table
    :columns="activeTab === 'right-rate' ? columns : masteryLevelCol"
    :dataSource="tableData"
    rowKey="id"
    :pagination="false"
    :expandedRowKeys="defaultExpandNodeId"
    @expand="onexpand"
    :scroll="{ y: '77vh' }"
    :loading="isLoading"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'name'">
        {{ record.name }}
      </template>
      <template v-else-if="column.dataIndex === 'class_rate'">
        <template v-if="activeTab === 'right-rate'">
          <span
            v-if="record.class_count"
            class="mark"
            :style="getBackgroundColor(record)"
          ></span>
          <span v-if="record.class_count">
            {{ (record[currentRate] * 100).toFixed(2) + '%' }} /
            {{ record.class_count }}题
          </span>
          <span v-else style="color: #ccc">--</span></template
        >
        <template v-else>
          <span
            v-if="
              route.query.studentId
                ? record.mastery_rate.personal_count
                : record.mastery_rate.class_count
            "
            class="mark"
            :style="getBackgroundColor(record)"
          ></span>
          <span
            v-if="
              route.query.studentId
                ? record.mastery_rate.personal_count
                : record.mastery_rate.class_count
            "
          >
            {{ (record.mastery_rate[currentRate] * 100).toFixed(2) + '%' }}
          </span>
          <span v-else style="color: #ccc">--</span>
        </template>
      </template>
      <template v-else-if="column.dataIndex === 'grade_rate'">
        <template v-if="activeTab === 'right-rate'">
          <span v-if="record.grade_count">
            {{ (record.grade_rate * 100).toFixed(2) + '%' }} /
            {{ record.grade_count }}题
          </span>
          <span v-else style="color: #ccc">--</span></template
        >
        <template v-else>
          <span v-if="record.mastery_rate.grade_count">
            {{ (record.mastery_rate.grade_rate * 100).toFixed(2) + '%' }}
          </span>
          <span v-else style="color: #ccc">--</span>
        </template>
      </template>
      <template v-else-if="column.dataIndex === 'detail'">
        <span @click="toDetail(record)" class="operator-btn">查看详情</span>
      </template>
    </template>
  </a-table>
</template>
<script setup>
import { computed, ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const currentRate = computed(() => {
  if (route.query.studentId) {
    return 'personal_rate'
  }
  return 'class_rate'
})

const emit = defineEmits(['toDetail'])

const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  compareLabel: {
    type: String,
    default: '年级平均'
  },
  isLoading: {
    type: Boolean,
    default: false
  },
  activeTab: {
    type: String,
    default: ''
  }
})

const defaultExpandNodeId = ref([])
watch(
  () => props.tableData,
  () => {
    if (!props.tableData.length) {
      return
    }
    defaultExpandNodeId.value = [props.tableData[0]?.id]
  },
  { immediate: true }
)

const onexpand = (expanded, record) => {
  if (expanded) {
    defaultExpandNodeId.value.push(record.id)
  } else {
    defaultExpandNodeId.value = defaultExpandNodeId.value.filter(
      item => item !== record.id
    )
  }
}
// 自定义列
const columns = computed(() => [
  {
    title: '知识点',
    dataIndex: 'name',
    width: '35%',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '正确率/题量',
    dataIndex: 'class_rate',
    scopedSlots: { customRender: 'class_rate' }
  },
  {
    title: `对比${props.compareLabel}/题量`,
    dataIndex: 'grade_rate',
    scopedSlots: { customRender: 'grade_rate' }
  },
  {
    title: '详情',
    dataIndex: 'detail',
    scopedSlots: { customRender: 'detail' }
  }
])

const masteryLevelCol = computed(() => [
  {
    title: '知识点',
    dataIndex: 'name',
    width: '35%',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '掌握度',
    dataIndex: 'class_rate',
    scopedSlots: { customRender: 'class_rate' }
  },
  {
    title: `对比${props.compareLabel}`,
    dataIndex: 'grade_rate',
    scopedSlots: { customRender: 'grade_rate' }
  },
  {
    title: '详情',
    dataIndex: 'detail',
    scopedSlots: { customRender: 'detail' }
  }
])

const getBackgroundColor = row => {
  const personalRate =
    props.activeTab === 'right-rate'
      ? row.personal_rate
      : row.mastery_rate.personal_rate
  const classRate =
    props.activeTab === 'right-rate'
      ? row.class_rate
      : row.mastery_rate.class_rate
  const gradeRate =
    props.activeTab === 'right-rate'
      ? row.grade_rate
      : row.mastery_rate.grade_rate
  const rate = route.query.studentId ? personalRate : classRate
  if (rate > gradeRate) {
    return { backgroundColor: '#378F00' }
  } else if (classRate === gradeRate) {
    return { backgroundColor: '#A8CD4C' }
  } else {
    return { backgroundColor: '#EA0021' }
  }
}
const toDetail = record => {
  emit('toDetail', record)
}
</script>
<style lang="less" scoped>
.mark {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 50%;
}
.operator-btn {
  color: @color-brand-regular;
  cursor: pointer;
}
</style>
